<template>
  <div class="registeredAccountList">
    <div class="titleTop first">
      <a-button type="primary" @click="createActivity">{{$t('navigation.activity_create')}}</a-button>
    </div>
    <div class="content">
      <CountCard :dataList="menus" @search="setSearch" :status="status"/>
      <activity-table :data="data" :pagination="pagination" @update="setOptions" :loading="loading" @addAcct="(record) => addAcct(record, true)" :selectedRowKeys="selectedRowKeys" @setSelected="setSelected"></activity-table>
    </div>
  </div>
</template>

<script>
import CountCard from '@/components/CountCard/CountCard'
import ActivityTable from '@/components/Config/ActivityTable'
import { findAllActivity, countActivity } from '@/api/config'
export default {
  name: 'activityList',
  components: { ActivityTable, CountCard },
  data () {
    return {
      mergeCompany: [],
      mergeManage: false,
      searchField: {},
      menus: [],
      data: [],
      selectedRowKeys: [],
      status: 'ALL',
      // isActivation: '',
      loading: false,
      showAddAcct: false,
      record: null,
      pagination: {
        total: 0,
        simple: true,
        current: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.status = this.$route.query.status || 'ALL'
    this.setOptions()
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val.query.status !== oldVal.query.status) {
          this.status = val.query.status || 'ALL'
          this.getList()
        }
      }
    }
  },
  methods: {
    setSelected (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    addAcct (record, flag, type) {
      this.record = record
      if (type) {
        this.getCount()
        this.getList()
      }
      this.showAddAcct = flag
    },
    setSearch (item) {
      console.info(item)
      this.$router.push({ query: { status: item.key } })
    },
    setOptions (data) {
      this.searchField = data ? data.searchField : {}
      this.pagination.current = data && data.pagination ? data.pagination.current : 1
      this.getCount()
      this.getList()
    },
    async getCount () {
      let res = await countActivity()
      this.menus = res.data
    },
    async getList () {
      this.loading = true
      this.selectedRowKeys = []
      let params = {
        status: this.status === 'ALL' ? '' : this.status,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        title: this.searchField.key,
        // creatorId: this.$store.state.user.userInfo.id,
        ...this.searchField
        // userRole: 'ROLE_VENDOR'
      }
      let res = await findAllActivity(params)
      if (res.code === 200) {
        this.data = res.data.items
        this.$set(this.pagination, 'total', res.data.totalCount)
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    createActivity () {
      this.$router.push('/activity/activityEdit')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.registeredAccountList
  .titleTop
    background #fff
    display flex
    align-items center
    justify-content flex-start
    padding  0 24px 12px
    h3
      margin-right 24px
      font-size 18px
      font-weight bold
  .content
    padding 12px 24px
  :global(.CandidateTable)
    margin-top 12px
</style>
